2: {packets: 12000000, bytes: 15000000000},
                3: {packets: 8000000, bytes: 10000000000},
                4: {packets: 3000000, bytes: 5000000000}
            },
            drop_stats: {
                1: {drops: 50000, rate: 0.01},
                2: {drops: 100000, rate: 0.02},
                3: {drops: 250000, rate: 0.08},
                4: {drops: 500000, rate: 0.15}
            },
            classification_stats: {
                1: {flows: 25000, bytes: 3500000000, packets: 15000000, accuracy: 0.98},
                2: {flows: 12000, bytes: 1500000000, packets: 12000000, accuracy: 0.97},
                3: {flows: 8000, bytes: 2500000000, packets: 8000000, accuracy: 0.95},
                4: {flows: 45000, bytes: 8000000000, packets: 45000000, accuracy: 0.92},
                5: {flows: 10000, bytes: 1000000000, packets: 10000000, accuracy: 0.94},
                6: {flows: 120000, bytes: 4500000000, packets: 120000000, accuracy: 0.96},
                7: {flows: 5000, bytes: 3000000000, packets: 5000000, accuracy: 0.93},
                8: {flows: 2000, bytes: 1500000000, packets: 2000000, accuracy: 0.91},
                9: {flows: 4000, bytes: 800000000, packets: 4000000, accuracy: 0.97},
                10: {flows: 15000, bytes: 500000000, packets: 15000000, accuracy: 0.98},
                11: {flows: 1000, bytes: 1200000000, packets: 1000000, accuracy: 0.99},
                12: {flows: 8000, bytes: 1000000000, packets: 8000000, accuracy: 0.90}
            },
            device_stats: [
                {ip: "192.168.1.100", mac: "aa:bb:cc:dd:ee:01", up_bytes: 2500000000, down_bytes: 5500000000, connections: 45},
                {ip: "192.168.1.101", mac: "aa:bb:cc:dd:ee:02", up_bytes: 1800000000, down_bytes: 4200000000, connections: 32},
                {ip: "192.168.1.102", mac: "aa:bb:cc:dd:ee:03", up_bytes: 3200000000, down_bytes: 7800000000, connections: 67},
                {ip: "192.168.1.103", mac: "aa:bb:cc:dd:ee:04", up_bytes: 1500000000, down_bytes: 3500000000, connections: 28},
                {ip: "192.168.1.104", mac: "aa:bb:cc:dd:ee:05", up_bytes: 4500000000, down_bytes: 9200000000, connections: 85}
            ]
        };
        
        if (data && data.hourly) {
            var times = [];
            var upTraffic = [];
            var downTraffic = [];
            
            for (var i = 0; i < data.hourly.length; i++) {
                var entry = data.hourly[i];
                times.push(entry.time);
                upTraffic.push(entry.up_bytes);
                downTraffic.push(entry.down_bytes);
            }
            
            trafficChart.setOption({
                xAxis: {
                    data: times
                },
                series: [
                    {
                        name: '上行流量',
                        data: upTraffic
                    },
                    {
                        name: '下行流量',
                        data: downTraffic
                    }
                ]
            });
        }
        
        // 更新应用流量统计
        if (data && data.app_traffic) {
            var appData = [];
            
            for (var app_id in data.app_traffic) {
                if (data.app_traffic.hasOwnProperty(app_id) && appNames[app_id]) {
                    appData.push({
                        name: appNames[app_id],
                        value: data.app_traffic[app_id]
                    });
                }
            }
            
            appChart.setOption({
                series: [
                    {
                        name: '应用流量',
                        data: appData
                    }
                ]
            });
        }
        
        // 更新优先级队列统计
        if (data && data.queue_stats) {
            var queuePackets = [];
            var queueBytes = [];
            
            for (var i = 1; i <= 4; i++) {
                var queueStat = data.queue_stats[i] || { packets: 0, bytes: 0 };
                queuePackets.push(queueStat.packets);
                queueBytes.push(queueStat.bytes);
            }
            
            queueChart.setOption({
                series: [
                    {
                        name: '包数量',
                        data: queuePackets
                    },
                    {
                        name: '字节数',
                        data: queueBytes
                    }
                ]
            });
        }
        
        // 更新丢包统计
        if (data && data.drop_stats) {
            var dropPackets = [];
            var dropRates = [];
            
            for (var i = 1; i <= 4; i++) {
                var dropStat = data.drop_stats[i] || { drops: 0, rate: 0 };
                dropPackets.push(dropStat.drops);
                dropRates.push(dropStat.rate * 100);
            }
            
            dropChart.setOption({
                series: [
                    {
                        name: '丢包数量',
                        data: dropPackets
                    },
                    {
                        name: '丢包率',
                        data: dropRates
                    }
                ]
            });
        }
        
        // 更新流量分类表格
        if (data && data.classification_stats) {
            var table = document.getElementById('classification_table');
            var placeholder = table.querySelector('.placeholder');
            
            if (placeholder) {
                placeholder.remove();
            }
            
            // 清除旧数据
            while (table.rows.length > 1) {
                table.deleteRow(1);
            }
            
            // 添加新数据
            for (var app_id in data.classification_stats) {
                if (data.classification_stats.hasOwnProperty(app_id) && appNames[app_id]) {
                    var stat = data.classification_stats[app_id];
                    var row = table.insertRow(-1);
                    
                    var cellName = row.insertCell(0);
                    var cellFlows = row.insertCell(1);
                    var cellBytes = row.insertCell(2);
                    var cellPackets = row.insertCell(3);
                    var cellAccuracy = row.insertCell(4);
                    
                    cellName.innerHTML = appNames[app_id];
                    cellFlows.innerHTML = stat.flows;
                    cellBytes.innerHTML = formatBytes(stat.bytes);
                    cellPackets.innerHTML = stat.packets;
                    cellAccuracy.innerHTML = (stat.accuracy * 100).toFixed(1) + '%';
                }
            }
        }
        
        // 更新设备流量表格
        if (data && data.device_stats) {
            var table = document.getElementById('device_table');
            var placeholder = table.querySelector('.placeholder');
            
            if (placeholder) {
                placeholder.remove();
            }
            
            // 清除旧数据
            while (table.rows.length > 1) {
                table.deleteRow(1);
            }
            
            // 添加新数据
            for (var i = 0; i < data.device_stats.length; i++) {
                var device = data.device_stats[i];
                var row = table.insertRow(-1);
                
                var cellIP = row.insertCell(0);
                var cellMAC = row.insertCell(1);
                var cellUp = row.insertCell(2);
                var cellDown = row.insertCell(3);
                var cellConns = row.insertCell(4);
                
                cellIP.innerHTML = device.ip;
                cellMAC.innerHTML = device.mac;
                cellUp.innerHTML = formatBytes(device.up_bytes);
                cellDown.innerHTML = formatBytes(device.down_bytes);
                cellConns.innerHTML = device.connections;
            }
        }
    }
    
    window.onload = function() {
        initCharts();
        updateStatistics();
        
        // 设置定时更新
        pollTimer = window.setInterval(updateStatistics, 30000); // 每30秒更新一次，减少服务器压力
    };
    
    window.onresize = function() {
        if (trafficChart) trafficChart.resize();
        if (appChart) appChart.resize();
        if (queueChart) queueChart.resize();
        if (dropChart) dropChart.resize();
    };
    
    window.onunload = function() {
        window.clearInterval(pollTimer);
    };
//]]></script>

<%+footer%>
